<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>

    <script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts/modules/series-label.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts/modules/oldie.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<div class="x-body">
    <blockquote class="layui-elem-quote">欢迎使用快捷酒店POS系统：

    </blockquote>
    <form class="layui-form layui-col-md12  layui-form-pane" id="formData">
        <div class="layui-form-item" id="x-city">
            <div class="layui-input-inline">
                <select name="rtid" id="roomType">
                    <option value="-1">所有房间类型</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <input class="layui-input" placeholder="开始月份" name="start" id="start" lay-verify="start"
                       autocomplete="off">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline">
                <input class="layui-input" placeholder="截止月份" name="end" id="end" lay-verify="end" autocomplete="off">
            </div>
            <button class="layui-btn"  type="button" id="search"><i class="layui-icon">&#xe615;</i>
            </button>
        </div>
    </form>

    <div id="container2" style="width: 900px;height:400px;"></div>
</div>

<script>

    $('#search').on('click', function () {

        var x=[];
        var y=[];

        var data = $('#formData').serialize();
        $.get({
            url: '/checkin/highChart1',
            data:data,
            dataType: 'json',
            success: function (res) {
                for(var i=0;i<res.length;i++){

                    //   console.log(res[i].name);
                    //  t.name=res[i].name;
                    x.push(res[i].name);
                    y.push([res[i].data]);
                }

                /*   $.each(res,function(index,value) {
                       x.push(value['name']);
                   })*/


                /*柱状图*/ //如果不传入时间的话，默认查全部记录
                chart2 = Highcharts.chart('container2', {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: '营业额统计'
                    },
                    xAxis: {
                        //  type: 'category'
                        /* labels: {
                        //     rotation: -45  // 设置轴标签旋转角度
                         }*/
                        categories: x
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: '金额 (元)'
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    tooltip: {
                        pointFormat: '人数: <b>{point.y:.1f} 人</b>'
                    },
                    series: [{
                        //   name: '总人口',
                        data: y,
                        dataLabels: {
                            enabled: true,
                            rotation: -90,
                            color: '#FFFFFF',
                            align: 'right',
                            format: '{point.y:.1f}', // :.1f 为保留 1 位小数
                            y: 10
                        }
                    }]
                });
            }
        });



    });/*end onclick*/


</script>


<!--old script-->
<script>

    (function () {

        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#start' //指定元素
         //       ,type: 'month'
            });
            //执行一个laydate实例
            laydate.render({
                elem: '#end' //指定元素
            //    ,type: 'month'
            });
        });



        //获取表格中指定列的值传递给新修改弹窗
        layui.use(['form', 'jquery'], function () {
            var $ = layui.$,
                form = layui.form;
            /*折线图*/
            var chart = null;
            /*柱状图*/
            var chart2=null;
            var data = $('#formData').serialize();
         //   var x=['2019-1', '2019-2', '2019-3', '2019-4', '2019-5', '2019-6', '2019-7', '2019-8', '2019-9', '2019-10', '2019-11', '2019-12'];
            var x=[];
            var y=[];
            $.get({
                url: '/checkin/highChart1',
                data:data,
                dataType: 'json',
                success: function (res) {

                    for(var i=0;i<res.length;i++){

                       //   console.log(res[i].name);
                      //  t.name=res[i].name;
                        x.push(res[i].name);
                        y.push([res[i].data]);
                    }

                /*   $.each(res,function(index,value) {
                       x.push(value['name']);
                   })*/


                    /*柱状图*/ //如果不传入时间的话，默认查全部记录
                    chart2 = Highcharts.chart('container2', {
                        chart: {
                            type: 'column'
                        },
                        title: {
                            text: '营业额统计'
                        },
                        xAxis: {
                            //  type: 'category'
                            /* labels: {
                            //     rotation: -45  // 设置轴标签旋转角度
                             }*/
                            categories: x
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: '金额 (元)'
                            }
                        },
                        legend: {
                            enabled: false
                        },
                        tooltip: {
                            pointFormat: '金额: <b>{point.y:.1f} 元</b>'
                        },
                        series: [{
                            //   name: '总人口',
                            data: y,
                            dataLabels: {
                                enabled: true,
                                rotation: -90,
                                color: '#FFFFFF',
                                align: 'right',
                                format: '{point.y:.1f}', // :.1f 为保留 1 位小数
                                y: 10
                            }
                        }]
                    });

                }
            });





            //根据返回的房间类型设置下拉框中房间类型的值
            var roomType;
            $.get({
                url: '/roomType/list',
                dataType: 'json',
                success: function (res) {
                    // console.log(res);
                    roomType = res.data;
                    var selectType = $("#roomType");
                    roomType.forEach(function (ele, index) {
                        var option = $('<option></option>');
                        //如果该类型在下拉框中没有，则添加
                        if ($('#roomType option[value=' + ele['id'] + ']').length == 0) {
                            option.val(ele['id']);
                            option.text(ele['roomType']);
                            option.appendTo(selectType);
                        }

                    });
                    form.render('select');
                }
            });
        });

        //扩展Date类型原型方法，获取当前时间
        Date.prototype.Format = function (fmt) { //author: meizz
            var o = {
                "M+": this.getMonth() + 1,                 //月份
                "d+": this.getDate(),                    //日
                "h+": this.getHours(),                   //小时
                "m+": this.getMinutes(),                 //分
                "s+": this.getSeconds(),                 //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds()             //毫秒
            };
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt))
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }
        var date = (new Date()).Format("yyyy-MM-dd hh:mm:ss");
        var span = document.querySelector("span.x-red").nextElementSibling;
        span.innerHTML = date;

    })();
</script>
</body>
</html>